<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理员 Admin index Examples</title>
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <script src="./assets/js/loginStateCheck.js"></script>
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="管理员" />
    <link rel="stylesheet" href="assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="assets/css/mineModify.css">
    <link rel="stylesheet" href="./assets/font/aliicon/iconfont.css">
    <link rel="stylesheet" href="assets/jqueryPaging/src/jquery.page.css">
    <style>
        #modalCancel,#modalConfirm {
            display: table-cell!important;
            padding: 0 5px;
            height: 44px;
            -webkit-box-sizing: border-box!important;
            box-sizing: border-box!important;
            font-size: 1.6rem;
            line-height: 44px;
            text-align: center;
            color: #0e90d2;
            display: block;
            word-wrap: normal;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            cursor: pointer;
            border-right: 1px solid #dedede;
        }
        #modalCancel:active ,#modalConfirm:active {
            background-color: #bdbdbd;
            color: white;
        }
        .infoHeadline {
            width: 40%;
        }
    </style>
</head>

<body data-type="widgets">
<script src="assets/js/theme.js"></script>
<div class="am-g tpl-g">
    <!-- 头部 -->
    <header>
        <!-- logo -->
        <div class="am-fl tpl-header-logo">
            <a href="javascript:;">
                <h1 style="display: inline; font-family: normal">地震新闻管理中心</h1>
            </a>
        </div>
        <!-- 右侧内容 -->
        <div class="tpl-header-fluid">

            <!-- 其它功能-->
            <div class="am-fr tpl-header-navbar">
                <ul>
                    <!-- 欢迎语 -->
                    <li class="am-text-sm tpl-header-navbar-welcome">
                        <a href="javascript:;">欢迎你, <span>管理员</span> </a>
                    </li>

                    <!-- 退出 -->
                    <li class="am-text-sm">
                        <a href="../userUi/earthInfo.html">
                            <span class="am-icon-sign-out"></span> 退出
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    </header>
    <!-- 侧边导航栏 -->
    <div class="left-sidebar">
        <!-- 用户信息 -->
        <div class="tpl-sidebar-user-panel">
            <div class="tpl-user-panel-slide-toggleable" style="display: flex;justify-content: center">
                <div class="tpl-user-panel-profile-picture">
                    <img src="assets/img/user04.png" alt="">
                </div>
            </div>
        </div>

        <!-- 菜单 -->
        <ul class="sidebar-nav">

            <li class="sidebar-nav-link">
                <a href="javascript:;" class="sidebar-nav-sub-title active">
                    <i class="am-icon-table sidebar-nav-link-logo"></i> 数据列表
                    <span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico"></span>
                </a>
                <ul class="sidebar-nav sidebar-nav-sub" style="display: block;">
                    <li class="sidebar-nav-link">
                        <a href="index.html" class="sub-active">
                            <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 地震科普文章列表
                        </a>
                    </li>
                </ul>
            </li>
            <li class="sidebar-nav-link">
                <a href="erweima.html">
                    <span class="iconfont icon-erweima"></span>&nbsp;&nbsp;&nbsp;&nbsp;二维码管理
                </a>
            </li>
        </ul>
    </div>
    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <ol class="am-breadcrumb">
            <li><a href="javascript:void(0);" class="am-icon-home" style="color: #999999;">首页</a></li>
            <li class="am-active">地震科普文章列表</li>
        </ol>
        <div class="row-content am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-body  am-fr">

                            <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                                <div class="am-form-group">
                                    <div class="am-btn-toolbar">
                                        <div class="am-btn-group am-btn-group-xs">
                                            <button type="button" class="am-btn am-btn-default am-btn-success" id="addBtn"><span class="am-icon-plus"></span> 新增</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                                <div class="am-form-group tpl-table-list-select" style="margin-top: 1px;">
                                    <select id="cataSelect" data-am-selected="{btnSize: 'sm'}" style="display: none;">
                                        <option value="all">所有类别</option>
                                    </select>
                                </div>
                            </div>
                            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3" >
                                <div id="searchWrap" class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                    <input id="searchContent" type="text" class="am-form-field " >
                                    <span class="am-input-group-btn" >
                                        <button style="background: #0fafff;" class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" type="button"></button>
                                    </span>
                                </div>
                            </div>
                            <div class="am-u-sm-12">
                                <table width="100%" id="articleTable" class="am-table am-table-compact am-table-striped tpl-table-black ">
                                    <thead>
                                        <tr>
                                            <th>文章缩略图</th>
                                            <th>文章标题</th>
                                            <th>作者</th>
                                            <th>时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            <div class="am-u-lg-12 am-cf">
                                <div class="am-fr" id="page">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="am-dimmer am-active" data-am-dimmer="" id="modalWrap" style="display: none;"></div>
    <div class="am-modal am-modal-confirm am-modal-active" tabindex="-1" id="my-confirm1" style="display: none;">
        <div class="am-modal-dialog" style="width: 400px;">
            <div class="am-modal-hd" style="color: red;">提示</div>
            <div class="am-modal-bd" id="modalContent1">是否确认删除这篇文章？</div>
            <div style="    height: 44px;
    overflow: hidden;
    display: table;
    width: 100%;
    border-collapse: collapse;">
                <div id="modalCancel" style="">取消</div>
                <div id="modalConfirm" style="">确认</div>
            </div>
        </div>
    </div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>
<script src="../common/utils.js"></script>
<script src="./assets/jqueryPaging/src/jquery.page.js"></script>
<script src="./assets/js/adminCommon.js"></script>
<script>
    Date.prototype.toLocaleString = function () {
        return this.getFullYear()+'-'+(this.getMonth()+1)+'-'+this.getDate()+'&nbsp;&nbsp'+this.getHours()+':'+this.getMinutes()+':'+this.getSeconds()
    };
    // 移除当前选项
    function removeItem () {
        var removeItems =  $(".article-item-delete");
        for ( var i =0 ;i < removeItems.length ; i++ ) {
            $(removeItems[i]).on("click", function () {
                console.log(this);
                var self = this;
                // 文章 ID
                $("#my-confirm1").css({
                    display : "block"
                });
                $("#modalWrap").css({
                    display : "block"
                });

                function confirm (){
                    console.log(this);
                    $("#my-confirm1").css({
                        display : "none"
                    });
                    $("#modalWrap").css({
                        display : "none"
                    });
                    var id = $(self).parent().children('.article-item-editor').data("articleid");
                    new AjaxRequest({
                                 type : 'DELETE',
                                 url : '../delete/' + id,
                                 sucCallback : function (res) {
                                     if (res.status === true) {
                                         document.querySelector("#modalConfirm").onclick = null;
                                         document.querySelector("#modalCancel").onclick = null;
                                         var page = $("#page .pagingUl .activP").text();
                                         (function (callback) {
                                             new AjaxRequest({
                                                 url : '../affer?pn=' + page,
                                                 type : 'POST',
                                                 contentType : false,
                                                 sucCallback : function (res) {
                                                     sucAddHtml(res, callback);
                                                 }
                                             })
                                         })(function () {
                                             removeItem();
                                             editorItem();
                                             checkItem();
                                         })
                                     }else {
                                         document.querySelector("#modalConfirm").onclick = null;
                                         document.querySelector("#modalCancel").onclick = null;
                                         openModal({
                                             describe : '删除失败！'
                                         })
                                     }
                                 }
                             })
                }
                function calcel () {
                    $("#my-confirm1").css({
                        display : "none"
                    });
                    $("#modalWrap").css({
                        display : "none"
                    });
                    document.querySelector("#modalConfirm").onclick = null;
                    document.querySelector("#modalCancel").onclick = null;
                }

                document.querySelector("#modalConfirm").onclick = confirm;
                document.querySelector("#modalCancel").onclick = calcel;
            })
        }
    }
    // 编辑当前文章
    function editorItem () {
        var editorItems =  $(".article-item-editor");
        for ( var i =0 ;i < editorItems.length ; i++ ) {
            $(editorItems[i]).on("click", function () {
                // id
                var id = $(this).data("articleid");
                window.location.href = "./modify.html?id=" + id;
            })
        }
    }
    // 查看文章具体内容
    function checkItem () {
        var checkItems =  $(".article-item-check");
        for ( var i =0 ;i < checkItems.length ; i++ ) {
            $(checkItems[i]).on("click", function () {
                var id = $(this).parent().children('.article-item-editor').data("articleid");
                window.location.href = "../userUi/knowledgeCheckPage.html?id=" + id;
            })
        }
    }

    //处理图片路径的方法
    function handlePicUrl(url) {
        if (url && url !== "空") {
            return "http://192.168.7.193:8084" + url;
        }else {
            return ''
        }
    }
    // 添加列表方法
    function sucAddHtml (res, callback) {
        var htmlStr = '';
        var tbody = $('#articleTable').children('tbody');
        if (res.status === true) {
            var jd = res.datas[0].list;
            for (var i = 0, length = jd.length; i < length;i++ ) {
                // 偶数
                if (i % 2 === 0) {
                    htmlStr += '<tr class="even gradeC">'
                }// 奇数
                else if (i % 2 !== 0) {
                    htmlStr += '<tr class="gradeX">'
                }
                htmlStr += '    <td>\n' +
                    (function () {
                       if (handlePicUrl(jd[i].infoPic)) {
                            return '        <img src="' + jd[i].infoPic +'" class="tpl-table-line-img" alt="">\n'
                        }else {
                            return ''
                        }
                    })() +
                    '    </td>\n' +
                    '    <td class="am-text-middle infoHeadline">'+ jd[i].infoHeadline +'</td>\n' +
                    '    <td class="am-text-middle">'+ jd[i].infoAuthor +'</td>\n' +
                    '    <td class="am-text-middle">'+ (new Date(Number((jd[i].infoReltime.length === 10) ? (jd[i].infoReltime + "000") : (jd[i].infoReltime)))).toLocaleString() +'</td>\n' +
                    '    <td class="am-text-middle">\n' +
                    '        <div class="tpl-table-black-operation">\n' +
                    '            <a href="javascript:void(0);" class="article-item-check">\n' +
                    '                <i class="am-icon-pencil"></i> 查看\n' +
                    '            </a>\n' +
                    '            <a href="javascript:void(0);" data-articleId="' + jd[i].infoId + '" class="article-item-editor">\n' +
                    '                <i class="am-icon-pencil"></i> 编辑\n' +
                    '            </a>\n' +
                    '            <a href="javascript:void(0);" class="tpl-table-black-operation-del article-item-delete">\n' +
                    '                <i class="am-icon-trash"></i> 删除\n' +
                    '            </a>\n' +
                    '        </div>\n' +
                    '    </td>\n' +
                    '</tr>'
            }
            // 当所有的内容添加完成 -- 一些操作
        }else {
            openModal({
                describe : "暂无数据！"
            })
        }
        tbody.html(htmlStr);
        if (res.datas&& res.datas[0].pages) {
            callback(res.datas[0].pages);
        }else {
            callback(false)
        }

    }

    // 进入页面后默认展示文章列表 以及  之后的 一系列操作
    (function (callback) {
        new AjaxRequest({
            url : '../affer',
            type : 'POST',
            contentType : false,
            sucCallback : function (res) {
                console.log(res);
                sucAddHtml(res, callback);
            }
        })
    })(function (totalPage) {
        removeItem(totalPage);
        editorItem();
        checkItem();
        page(totalPage, function (page) {
            (function (callback) {
                new AjaxRequest({
                    url : '../affer?pn=' + page,
                    type : 'POST',
                    contentType : false,
                    sucCallback : function (res) {
                        console.log(res);
                        sucAddHtml(res, callback);
                    }
                })
            })(function () {
                removeItem();
                editorItem();
                checkItem();
            })
        })
    });

    // 查询文章列表 以及  之后的 一系列操作
    (function (callback) {
        // 搜索
        $("#searchWrap span").on("click", function () {
            $("#page").empty();
            var value = $("#searchWrap input").val();
            if (value) {
                console.log(JSON.stringify({
                    infoAuthor : value,
                    infoId : value,
                    infoHeadline : value
                }));
                new AjaxRequest({
                    type : 'POST',
                    url : '../query',
                    data : JSON.stringify({
                        infoAuthor : value,
                        infoId : value,
                        infoHeadline : value
                    }),
                    sucCallback : function (res) {
                        sucAddHtml(res, callback);
                    }
                })
            }else {
                /*new AjaxRequest({
                    url : '../affer',
                    type : 'POST',
                    contentType : false,
                    sucCallback : function (res) {
                        sucAddHtml(res, callback);
                    }
                })*/
                window.location.href='./index.html'
            }
        });
        // 类型查询
        $("#cataSelect").on("change", function () {
            $("#page").empty();
            var value = $(this).val();
            if (value === "all") {
                new AjaxRequest({
                    url : '../affer',
                    type : 'POST',
                    contentType : false,
                    sucCallback : function (res) {
                        sucAddHtml(res, callback);
                    }
                })
            }else {
                new AjaxRequest({
                    url : '../category/' + value,
                    sucCallback : function (res) {
                        sucAddHtml(res, callback);
                    }
                })
            }
        })
    })(function (totalPage) {
        removeItem();
        editorItem();
        checkItem();
        page(totalPage, function (page) {
            (function (callback) {
                new AjaxRequest({
                    url : '../affer?pn=' + page,
                    type : 'POST',
                    contentType : false,
                    sucCallback : function (res) {
                        sucAddHtml(res, callback);
                    }
                })
            })(function () {
                removeItem();
                editorItem();
                checkItem();
            })
        })
    });

    // 增加当前选项
    $("#addBtn").on("click", function () {
        window.location.href = "./add.html";
    });

    // 分页处理函数
    function page (total, callback) {
        if (total > 1) {
            $("#page").Page({
                totalPages: total,//分页总数
                liNums: 10,//分页的数字按钮数(建议取奇数)
                activeClass: 'activP', //active 类样式定义
                callBack : function(page){
                    callback(page);
                }
            });
        }
    };

    // 查询类别
    (function () {
        new AjaxRequest({
            type : 'GET',
            url : '../getcategory/1',
            sucCallback : function (res) {
                if (res.status === true) {
                    var total = res.datas[0].total;
                    var data = res.datas[0].list;
                    var htmlStr = '';
                    for (var i = 0;i<total;i++ ) {
                        htmlStr += '<option value="' + data[i].categoryId +'">' +  data[i].category + '</option>'
                    }
                    var select = $("#cataSelect");
                    select.html(select.html() + htmlStr);
                }else {
                    openModal({
                        describe : '删除失败！'
                    })
                }
            }
        })
    })();
</script>

</body>
</html>
